<template>
  <div class="lm-design">
    <div class="dombo-type">
      <div class="title">活动矫治器类型选择</div>
      <div class="body">
        <el-checkbox-group v-model="checkList">
          <template v-for="item in params">
            <!-- 显示卡片信息 -->
            <div v-if="!item.type" :key="item.index" class="design-card">
              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
              <!-- appliance-01 -->
              <svg-icon class-name="search-icon" :icon-class="item.icon"></svg-icon>
            </div>
            <!-- INPUT 输入框 -->
            <div v-else :key="item.index" class="design-card" style="display:block;width:100%;">
              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
              <div style="padding:10px;">
                <el-input
                  v-model="textarea"
                  type="textarea"
                  :rows="5"
                  style="background: #F8F8FA;"
                  placeholder="请输入备注"
                >
                </el-input>
              </div>
            </div>
          </template>
        </el-checkbox-group>

      </div>
    </div>
    <div class="dombo-type">
      <div class="title">医生特别提示</div>
      <div class="body">
        <div class="design-card" style="display:block;width:100%;">
          <div style="padding:10px;">
            <svg-icon class-name="search-icon tishi" icon-class="change-tishi"></svg-icon>
            <div style="display:inline-block;text-align: center;">
              <svg-icon class-name="search-icon yawei" icon-class="change-yawei"></svg-icon>
              <br />
              <span style="display:inline-block;">牙位图</span>
            </div>
            <el-upload
              class="upload-demo"
              drag
              :action="uploadUrl"
              multiple
              :file-list="draggableUpload"
              :on-success="uploadRightSuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="dombo-type">
      <div class="title">信息确认</div>
      <div class="body">
        <div class="design-card" style="display:block;width:100%;">
          <div style="padding:10px;">
            <el-row>
              <el-col :span="8">
                <span class="card-label">收件人：</span>
                <span class="card-text">林医生</span>
              </el-col>
              <el-col :span="8">
                <span class="card-label">收件人地址：</span>
                <span class="card-text">ceshi007</span>
              </el-col>
              <el-col :span="8">
                <span class="card-label">收件人电话：</span>
                <span class="card-text">15000998897</span>
              </el-col>
            </el-row>
            <el-row>
              <i class="el-icon-warning red"></i><span class="red">&nbsp;设计单提交前请务必确认收货地址是否正确，若有异议还请尽快联系罗慕客服人员修改收货地址信息！</span>
            </el-row>
            <el-row>
              <span class="blue">&nbsp;联系电话18613316149(微信同步)</span>
            </el-row>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import comboPlugin from './comboPlugin';
export default {
  props: {
    plan: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      checkList: [],
      textarea: '',
      params: [
        { id: 'app01', name: '合垫舌簧矫治器', icon: 'appliance-01' },
        { id: 'app02', name: '扩弓器', icon: 'appliance-02' },
        { id: 'app03', name: 'Frankel 1/l1活器', icon: 'appliance-03' },
        { id: 'app04', name: 'Twin Block矫治器', icon: 'appliance-04' },
        { id: 'app05', name: '口外弓', icon: 'appliance-05' },
        { id: 'app06', name: '舌习惯破除器', icon: 'appliance-06' },
        { id: 'app07', name: '四簧圈扩聘弓', icon: 'appliance-07' },
        { id: 'app08', name: '摆式推磨牙向后', icon: 'appliance-08' },
        { id: 'app09', name: '前方牵引', icon: 'appliance-09' },
        { id: 'app10', name: '间隙保持器', icon: 'appliance-10' },
        { id: 'app11', name: '其他矫治器', type: 'textarea' }
      ]
    };
  },
  methods: {
    changeType(type) {
      this.plan.plan = type;
    }
  }
};
</script>
<style lang="scss">
.lm-design{
    .dombo-type{
       margin-bottom: 20px;
        .title{
            padding-left: 10px;
            font-size: 16px;
            font-weight: bold;
            line-height: 21px;
            color: #333333;
            border-left: 3px solid #508FCC;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .body{
            .design-card{
                display: inline-block;
                width: 220px;
                // height: 237px;
                background: #FFFFFF;
                border: 1px solid #E6E6E6;
                opacity: 1;
                border-radius: 10px;
                margin: 10px 20px 10px 0;
                padding:10px 10px 0 10px;
                .search-icon{
                    width: 100%;
                    height: 100%;
                }
                .tishi{
                    display: inline-block;
                    width: 270px;
                    height: 200px;
                }
                .yawei{
                    display: inline-block;
                    width: 150px;
                     height: 180px;
                }
                .upload-demo{
                    display: inline-block;
                    width: 200px;
                     height: 200px;
                    .el-upload{
                        .el-upload-dragger{
                            width: 270px !important;
                             height: 200px;
                        }
                    }
                }
                .card-label{
                    color: #333333;
                }
                .card-text{
                    color: #666666;
                }
                .red{
                   color:#EA5F5F;
                   margin: 10px 0;
                   display: inline-block;
                }
                .blue{
                    color:#508FCC;
                    padding-left: 15px;
                }
            }
        }
    }
}
</style>
